<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态增减标签页</title>
	<style>
		.tabs{
			width: 800px;
			border: 1px skyblue solid;
			min-height: 300px;
			margin-bottom: 30px;
		}
	</style>
</head>
<body>
<div id="app">
	<div class="tabs">
		<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
			<el-tab-pane
					:key="item.name"
					v-for="(item, index) in editableTabs"
					:label="item.title"
					:name="item.name"
			>
				<div id="test">
					<button onclick="addElement()">测试新加{{new Date().getTime()}}</button>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</div>
<div id="app2">
	<div class="tabs">
		<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
			<el-tab-pane
					:key="item.name"
					v-for="(item, index) in editableTabs"
					:label="item.title"
					:name="item.name">
				{{我是字符串}}
			</el-tab-pane>
		</el-tabs>
	</div>
</div>
<div id="app3">

</div>
<button onclick="addElement()">1312321</button>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script>
	window.addElement = function () {
		vueTabs.$data.editableTabs[0].content = `
			<div id="test">
				<button onclick="addElement()">测试新加${new Date().getTime()}</button>
			</div>
		`
	}
</script>
<script>
	var vueConfig  = {
		el:"#app",
		data() {
			return {
				editableTabsValue: '2',
				editableTabs: [{
					title: 'Tab 1',
					name: '1',
					content: 'Tab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 contentTab 1 content'
				}, {
					title: 'Tab 2',
					name: '2',
					content: 'Tab 2 content'
				}],
				tabIndex: 2
			}
		},
		methods: {
			handleTabsEdit(targetName, action) {
				if (action === 'add') {
					let newTabName = ++this.tabIndex + '';
					this.editableTabs.push({
						title: 'New Tab',
						name: newTabName,
						content: 'New Tab content'
					});
					this.editableTabsValue = newTabName;
				}
				if (action === 'remove') {
					let tabs = this.editableTabs;
					let activeName = this.editableTabsValue;
					if (activeName === targetName) {
						tabs.forEach((tab, index) => {
							if (tab.name === targetName) {
								let nextTab = tabs[index + 1] || tabs[index - 1];
								if (nextTab) {
									activeName = nextTab.name;
								}
							}
						});
					}

					this.editableTabsValue = activeName;
					this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				}
			}
		}
	}
	var vueTabs = new Vue(vueConfig)

	// 创建第二个标签页
	var vueConfig2 = Object.assign(vueConfig)
	vueConfig2.el = '#app2'
	var vueTabs2 = new Vue(vueConfig2)
	//创建第三个实例

</script>
</body>
</html>